<template>
    <view>
        <form>
            
            <view class="cu-form-group margin-top">
                <view class="title">工程编号</view>
                <view>{{ dataInfo.projectNo }}</view>
            </view>
            <view class="cu-form-group ">
                <view class="title">工程名称</view>
                <view>{{ dataInfo.projectName }}</view>
            </view>
            <view class="cu-form-group">
                <view class="title">收货日期</view>
                <picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
                    <view class="picker">
                        {{dataInfo.ddate}}
                    </view>
				</picker>
            </view>


            <view class="cu-form-group" style="min-height: 0;"></view>
            <view class="cu-bar bg-white">
                <view class="action">现场图片上传</view>
            </view>
            
            <view class="cu-form-group">
                <view class="grid col-4 grid-square flex-sub">
                    <view class="bg-img" v-for="(item,index) in dataInfo.dImageList" :key="index" @tap="ViewImage(dataInfo.dImageList,$event)" :data-url="dataInfo.dImageList[index]">
                        <image :src="dataInfo.dImageList[index]" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                            <text class='cuIcon-close'></text>
                        </view>
                    </view>
                    <view class="solids" @tap="ChooseImage(dataInfo.dImageList)" v-if="dataInfo.dImageList.length<4">
                        <text class='cuIcon-cameraadd'></text>
                    </view>
                </view>
            </view>


            <view class="cu-form-group" style="min-height: 0;"></view>
            <view class="cu-bar bg-white">
                <view class="action">到货单图片上传</view>
            </view>
            
            <view class="cu-form-group">
                <view class="grid col-4 grid-square flex-sub">
                    <view class="bg-img" v-for="(item,index) in dataInfo.dImageList" :key="index" @tap="ViewImage(dataInfo.dImageList,$event)" :data-url="dataInfo.dImageList[index]">
                        <image :src="dataInfo.dImageList[index]" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                            <text class='cuIcon-close'></text>
                        </view>
                    </view>
                    <view class="solids" @tap="ChooseImage(dataInfo.dImageList)" v-if="dataInfo.dImageList.length<4">
                        <text class='cuIcon-cameraadd'></text>
                    </view>
                </view>
            </view>


            <view class="cu-form-group" style="min-height: 0;"></view>
            <view class="cu-bar bg-white" @click="addDetail">
                <view class="action">材料明细<text class="cuIcon-roundadd padding text-red"></text></view>
                
            </view>
            <view class="cu-card">
                <view class="cu-item shadow">
                    
                    <view class="cu-form-group">
                        <view class="title">材料编码</view>
                        <view>010300314</view>
                    </view>
                    <view class="cu-form-group padding">
                        <view class="title">材料名称</view>
                        <view>铜双外丝直接</view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">规格型号</view>
                        <view>15</view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">备注</view>
                        <view>还需要5个</view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">需求数量</view>
                        <view>15</view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">收货数量</view>
                        <view>10</view>
                    </view>



                        
                    <view class="cu-bar bg-white">
                        <view class="action"></view>
                        <view>
                            <text class="cuIcon-deletefill padding text-sl text-red"></text>
                        </view>
                        
                    </view>

                </view>
                <view class="cu-item shadow">
                    
                    <view class="cu-form-group">
                        <view class="title">材料编码</view>
                        <view>010500394</view>
                    </view>
                    <view class="cu-form-group padding">
                        <view class="title">物料名称</view>
                        <view>不锈钢闸阀</view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">规格型号</view>
                        <view>DN15 PN10</view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">备注</view>
                        <view>收完</view>
                    </view>

                    <view class="cu-form-group">
                        <view class="title">需求数量</view>
                        <view>20</view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">收货数量</view>
                        <view>15</view>
                    </view>


                        
                    <view class="cu-bar bg-white">
                        <view class="action"></view>
                        <view>
                            <text class="cuIcon-deletefill padding text-sl text-red"></text>
                        </view>
                        
                    </view>

                </view>
            
          </view>
          <view style="height: 80px" ></view>
            <view class="btn-group cu-bar foot">
                <button class="cu-btn bg-green shadow-blur">
                    提交
                </button>
            </view>
        </form>
        <add-detail :modalNameDetail="modalNameDetail" @modalNameDetailEmit="modalNameDetailEmit" v-if="showAddDetail"></add-detail>
        
    </view>
</template>
<script>
import addDetail from './addDetail.vue'
export default {
    components:{
        addDetail
    },
    data(){
        return{
            switchA: false,
            date: '2024-03-12',
            modalName: null,
            imgList:["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg","http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"],
            imageUrl: ["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg","http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"],
            modalNameDetail: null,
            showAddDetail:false,
            dataInfo:{
                projectName:'重庆雅恒房地产开发有限公司给水工程裁断',
                projectNo:'PY2019010007-CD2',
                ddate:'2024-03-12',
                duser:'超级管理员',
                dmark:'',
                dImageList:[],
                dInfo:[{
                    zhengGaiNo:1,
                    zhengGaiXiang:'现场整改',
                    zhengGaiCuoShi:'现场整改现场整改现场整改现场整改现场整改现场整改',
                    zhengGaiDate:'2020-03-12',
                    zhengGaiFileUrl:["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg","http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"]
                },{
                    zhengGaiNo:2,
                    zhengGaiXiang:'现场整改2',
                    zhengGaiCuoShi:'现场整改现场整改现场整改现场整改现场整改现场整改',
                    zhengGaiDate:'2020-03-12',
                    zhengGaiFileUrl:["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg","http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"]
                },{
                    zhengGaiNo:3,
                    zhengGaiXiang:'现场整改3',
                    zhengGaiCuoShi:'现场整改现场整改现场整改现场整改现场整改现场整改',
                    zhengGaiDate:'2020-03-12',
                    zhengGaiFileUrl:["http://192.168.1.49:8080/app/static/image/zfgs/zfgs1.jpg","http://192.168.1.49:8080/app/static/image/zfgs/zfgs2.jpg"]
                }]

            },
            showButton : true
        }
    },
    onLoad(e){
        if(e.item == '查看'){
            this.showButton = false
        }
    },
    methods:{
        SwitchA(e) {
            // this.switchA = e.detail.value
        },
        DateChange(e) {
            this.date = e.detail.value
        },
        textareaAInput(e){
            this.dataInfo.dmark = e.detail.value
        },
        addDetail(){

            this.showAddDetail = true
            
            this.modalNameDetail = 'bottomModal'

            console.log(this.modalNameDetail)
        },
        modalNameDetailEmit(e){
            this.modalNameDetail = e
        },

        ViewImage(imageList,e) {
            uni.previewImage({
                urls: imageList,
                current: e.currentTarget.dataset.url
            });
        },
        DelImg(e) {
            uni.showModal({
                title: '',
                content: '确定要删除吗？',
                cancelText: '取消',
                confirmText: '确认',
                success: res => {
                    if (res.confirm) {
                        console.log(res.confirm,this.dataInfo.dImageList ,e,this.dataInfo.dImageList[e.currentTarget.dataset.index]);
                        // this.dataInfo.dImageListst.splice(e.currentTarget.dataset.index, 1)
                        // if (this.dataInfo.dImageListst) {
                        //     console.log(e.currentTarget.dataset.index,this.dataInfo.dImageListst,'e====')
                        //     this.dataInfo.dImageListst.splice(e.currentTarget.dataset.index, 1);
                        // }
                        // this.$set(this.dataInfo.dImageListst, e.currentTarget.dataset.index,1)
                        // this.dataInfo.dImageListst.splice(e.currentTarget.dataset.index, 1);
                        this.$delete(this.dataInfo.dImageListst, e.currentTarget.dataset.index);
                        
                        
                    }
                }
            })
        },
        ChooseImage() {
            uni.chooseImage({
                count: 4, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album"], //从相册选择
                success: (res) => {
                    if (this.dataInfo.dImageList.length != 0) {
                        this.dataInfo.dImageListst = this.dataInfo.dImageList.concat(res.tempFilePaths);
                    } else {
                        this.dataInfo.dImageList = res.tempFilePaths;
                    }
                    
                    console.log(this.dataInfo,'this.dataInfo')
                    this.$u.toast("上传成功");
                }
            });
        },

    }
}
</script>
<style lang="scss" scoped>
.action{
    color: #303133;
}
.cu-form-group{
    flex-wrap: wrap
}
.text-sl{
    font-size: 22px !important;
}
.cu-bar {
  min-height: 80px;
}
.cu-btn {
  font-size: 16px;
  height: 40px;
}
.foot{
    z-index: 997;
    background: #fff;
}
.green{
    color: green;
}
</style>